/*
 * 整体妆容管理视图
 * @Author: ljb
 * @Date: 2018-05-22 15:14:23
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-10-19 18:09:45
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
	@deep: ~">>>";
    .v-customer-overall-makeup-views {
		padding: 20px;
		.makeup-pane {
			min-height: 74vh;
		}
	}
	@{deep} .ivu-modal-body{
		min-height: 370px;
	}
</style>
<template>
	<div class="v-customer-overall-makeup-views">

		<Tabs
			v-model="tag_name"
			type="card">

			<TabPane
				:label="$t('common.check')"
				class="makeup-pane"
				name="查看">

				<!-- 搜索组件 -->
				<search-form
					:classify-list="classifyList"
					@search="confirmSearch"
				/>

				<makeup-index
					:loading="table_loading"
					:makeups="makeupList"
					:classify-list="classifyList"
					@show="showMakeupDetail"
					@delete="deleteDetail"
					@sort="confirmSearch"/>

				<br>

				<!-- 分页组件 -->
				<Row
					type="flex"
					justify="center">
					<Page
						:total="makeups.total"
						:current="makeups.current_page"
						:page-size="query_info.per_page"
						placement="top"
						show-sizer
						show-total
						@on-change="pageChange"
						@on-page-size-change="perPageChange"/>
				</Row>

			</TabPane>
		</Tabs>

		<Modal
			v-model="show_modal"
			:title="$t('overall.update_sort_and_status')"
			class-name="vertical-middle-modal"
			width="400">
			<!-- 整体妆容编辑组件 -->
			<makeup-edit
				v-if="show_modal"
				:makeup-detail="makeup_detail"
				:classify-list="classifyList"
				@update="updateMakeup"/>

			<div slot="footer"/>

		</Modal>

	</div>
</template>

<script>

import API_LIST from 'src/API_LIST';

import { mapMutations } from 'vuex';

import qs from 'qs';

import makeupIndex from './index';
import makeupEdit from './edit';
import searchForm from './search-form';

export default {
	name: 'OverallMakeupViews',
	components: {
		searchForm,
		makeupIndex,
		makeupEdit,
	},
	data() {
		return {
			query_info: {
				page: 1,

				per_page: 20,

				name: '',

				is_deleted: '',

				pack_category_id: '',

				order_bys: [],
			}, // 页码

			search_info: {

				page: 1,

				per_page: 20,

			}, // 分页信息

			tag_name: this.$t('overall.check'),

			table_loading: false, // 表格更新时的loading

			show_modal: false, // 显示modal

			makeups: {}, // 整体妆容列表

			makeup_detail: {}, // 整体妆容详情

			current_priority: '', // 当前的排序值

			classifyList: [], // 整体妆容的分类
		};
	},
	computed: {
		makeupList() {
			return this.makeups.data || [];
		},
	},
	mounted() {
		this.fetchMakeupList(this.query_info);
	},
	methods: {

		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),

		/**
         * 页码改变
         * @param  {string} pageNumber {当前页码}
         * @return {undefined}
         */
		pageChange(pageNumber) {
			this.search_info.page = pageNumber;

			this.search_info.per_page = this.query_info.per_page;

			this.fetchMakeupList(this.search_info);
		},

		/**
         * 每页显示数改变
         * @param  {string} per_page {当前每页显示数}
         * @return {undefined}
         */
		perPageChange(per_page) {
			this.search_info.per_page = per_page;

			this.query_info.per_page = per_page;

			this.fetchMakeupList(this.query_info);
		},

		/**
         * 确认搜索
         * @param  {Object} param {搜索的参数对象}
         * @return {undefined}
         */
		confirmSearch({
			name, is_deleted, category_id, order_by, sort,
		}) {
			this.query_info.name = name;
			this.query_info.is_deleted = is_deleted;
			this.query_info.pack_category_id = category_id;
			this.query_info.order_bys = order_by && sort ? [{ order_by, sort }] : [];
			this.search_info = JSON.parse(JSON.stringify(this.query_info));

			this.fetchMakeupList(this.query_info);
		},

		/**
         * 显示整体妆容详情
         * @param  {Object} detail {详情对象}
         * @return {undefined}
         */
		showMakeupDetail(detail) {
			this.makeup_detail = detail;

			this.show_modal = true;
		},
		/**
		 *删除整体妆容详情
		 * @param {Number} id {需要删除的详情的id}
		 * @return {undefined}
		 */
		deleteDetail(id) {
			this.$Modal.confirm({
				title: this.$t('product.tip'), // '温馨提示',
				content: this.$t('product.is_delete'), // '删除之后将无法恢复，确定吗？',
				onOk: () => {
					const param = {
						_method: 'DELETE',
					};

					this.showSpin();

					this.$http.post(`${API_LIST.CUSTOMER_PACK}/${id}`, param)
						.then(({ data }) => {
							if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

							this.fetchMakeupList(this.search_info);

							this.$Message.success(this.$t('common.delete_success'));
						})
						.catch((err) => {
							this.$Message.error(err.message || err.statusText);
						})
						.then(this.closeSpin);
				},

				onCancel: () => {},
			});
		},

		/**
         * 更新产品信息
		 * @param {String} id {产品id}
         * @param {Object} param {需要更新的参数对象}
         * @return {undefined}
         */
		updateMakeup(id, param) {
			this.showSpin();

			this.$http.post(`${API_LIST.CUSTOMER_PACK}/${id}`, param)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.$Message.success(this.$t('common.update_success'));

					this.show_modal = false;

					this.fetchMakeupList(this.search_info);
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(this.closeSpin);
		},

		/**
         * 获取产品列表
         * @param  {Object} param {搜索列表的参数}
         * @return {undefined}
         */
		fetchMakeupList(param) {
			this.table_loading = true;

			const query_str = qs.stringify(param);

			this.$http.get(`${API_LIST.CUSTOMER_PACK}?${query_str}`)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.makeups = data.packs;

					this.classifyList = data.pack_categories;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(() => { this.table_loading = false; });
		},
	},
};
</script>
